<template>
	<view class="tracking-component">
		<!-- 视频流与Canvas容器 -->
		<view class="tracker-container" :style="{ width: width + 'px', height: height + 'px' }">
			<video ref="videoRef" class="video" autoplay playsinline webkit-playsinline :style="{ display: isActive ? 'block' : 'none' }"></video>
			<canvas ref="canvasRef" class="canvas"></canvas>
		</view>
	</view>
</template>

<script setup>
import { ref, watch, onUnmounted, reactive, toRefs,onMounted } from 'vue';



onMounted(() => {
  // 检查全局 tracking 对象是否存在
  	// const tracker = new tracking.ObjectTracker('face');
	// console.log('tracking.js 未加载！请检查 CDN 引入',tracker);
  if (window.tracking) {
    console.log('tracking.js 加载成功:', window.tracking);
    // 继续初始化跟踪器
    initTracker();
  } else {
    console.error('tracking.js 未加载！请检查 CDN 引入');
    emit('onPhotoTaken', { success: false, msg: '人脸识别库加载失败' });
  }
});
// --------------------------
// 1. Props：接收父页面参数
// --------------------------
const props = defineProps({
	width: { type: Number, default: 320 }, // 组件宽度
	height: { type: Number, default: 240 }, // 组件高度
	isActive: { type: Boolean, default: false } // 父页面控制是否激活（开始识别）
});

// --------------------------
// 2. 内部状态与 Refs
// --------------------------
const videoRef = ref(null);
const canvasRef = ref(null);
const state = reactive({
	tracker: null, // 跟踪器实例
	cameraStream: null, // 摄像头流
	isTracking: false, // 是否正在跟踪
	hasDetected: false // 是否已检测到人脸（避免重复拍照）
});

// 暴露事件：向父页面传递照片
const emit = defineEmits(['onPhotoTaken']);

// --------------------------
// 3. 核心方法
// --------------------------

/**
 * 初始化跟踪器
 */
const initTracker = () => {
	if (state.tracker) return; // 避免重复初始化

	// 创建人脸跟踪器（全局 tracking 对象来自 CDN）
	const tracker = new tracking.ObjectTracker('face');
	tracker.setStepSize(1.5); // 高灵敏度（适合快速识别）

	// 监听跟踪事件
	tracker.on('track', (event) => {
		if (!state.isTracking || state.hasDetected) return;

		const ctx = canvasRef.value.getContext('2d');
		ctx.clearRect(0, 0, props.width, props.height);

		if (event.data.length > 0) {
			// 检测到人脸，绘制跟踪框
			event.data.forEach((face) => {
				ctx.strokeStyle = '#409EFF';
				ctx.lineWidth = 2;
				ctx.strokeRect(face.x, face.y, face.width, face.height);
			});

			// 自动拍照（仅拍一次）
			takePhoto();
			state.hasDetected = true; // 标记已拍照，避免重复
		}
	});

	state.tracker = tracker;
};

/**
 * 启动摄像头和跟踪器
 */
const startTracking = async () => {
	if (state.isTracking || !props.isActive) return;

	try {
		// 请求摄像头权限
		const stream = await navigator.mediaDevices.getUserMedia({
			video: { width: props.width, height: props.height, facingMode: 'user' },
			audio: false
		});

		videoRef.value.srcObject = stream;
		state.cameraStream = stream;
		state.isTracking = true;
		state.hasDetected = false; // 重置检测状态

		// 视频加载后启动跟踪
		videoRef.value.onloadedmetadata = () => {
			tracking.track(videoRef.value, state.tracker);
		};
	} catch (err) {
		console.error('摄像头启动失败:', err);
		emit('onPhotoTaken', { success: false, msg: '摄像头访问失败' });
	}
};

/**
 * 停止跟踪和摄像头
 */
const stopTracking = () => {
	if (!state.isTracking) return;

	// 停止跟踪器
	state.tracker?.removeAllListeners();
	// 停止摄像头流
	state.cameraStream?.getTracks().forEach((track) => track.stop());
	// 清空状态
	state.isTracking = false;
	videoRef.value.srcObject = null;
};

/**
 * 拍照（截取视频帧）
 */
const takePhoto = () => {
	const canvas = document.createElement('canvas');
	canvas.width = props.width;
	canvas.height = props.height;
	const ctx = canvas.getContext('2d');

	// 从视频中截取当前帧
	ctx.drawImage(videoRef.value, 0, 0, canvas.width, canvas.height);

	// 转为 base64 格式（可改为 blob）
	const base64Image = canvas.toDataURL('image/jpeg');

	// 发送照片给父页面
	emit('onPhotoTaken', {
		success: true,
		data: base64Image,
		msg: '识别到人脸并拍照成功'
	});

	// 拍照后停止跟踪
	stopTracking();
};

// --------------------------
// 4. 监听父组件激活状态
// --------------------------
watch(
	() => props.isActive,
	(newVal) => {
		if (newVal) {
			initTracker(); // 初始化跟踪器
			startTracking(); // 启动跟踪
		} else {
			stopTracking(); // 停止跟踪
		}
	}
);

// 组件卸载时清理
onUnmounted(stopTracking);

// 暴露方法给父组件（可选）
defineExpose({ startTracking, stopTracking });
</script>

<style scoped>
.tracker-container {
	position: relative;
	margin: 10px auto;
	background: #000;
	border-radius: 8px;
	overflow: hidden;
}

.video,
.canvas {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.video {
	display: none;
} /* 默认隐藏，激活后显示 */
</style>
